<template>
  <div id="content">
    <div class="box">
      <el-form ref="meetForm" :model="meetForm" :rules="rules">
        <el-form-item
          label="活动标题(D)"
          prop="title"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.title"></el-input>
        </el-form-item>
        <el-form-item
          label="活动描述(T)"
          prop="description"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.description"></el-input>
        </el-form-item>
        <el-form-item
          label="关键字(K)"
          prop="keywords"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.keywords"></el-input>
        </el-form-item>
        <el-form-item
          label="是否置顶"
          prop="topRank"
          :label-width="formLabelWidth"
        >
          <el-switch
            v-model="meetForm.topRank"
            active-color="#13ce66"
            inactive-color="#cccccc"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item
          label="显示顺序"
          prop="sortRank"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.sortRank"></el-input>
        </el-form-item>
        <el-form-item
          label="发布时间"
          prop="issueTime"
          :label-width="formLabelWidth"
        >
          <el-date-picker v-model="meetForm.issueTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择发布时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="是否推荐"
          prop="classicRank"
          :label-width="formLabelWidth"
        >
          <el-switch
            v-model="meetForm.classicRank"
            active-color="#13ce66"
            inactive-color="#cccccc"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item
          label="跳转地址"
          prop="jumpUrl"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.jumpUrl"></el-input>
        </el-form-item>
        <el-form-item
          label="活动主题"
          prop="meetTitle"
          :label-width="formLabelWidth"
        >
          <el-select v-model="meetForm.meetTitle" placeholder="请选择">
            <el-option
              v-for="item in meetTitleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="活动形式"
          prop="meetForm"
          :label-width="formLabelWidth"
        >
          <el-select v-model="meetForm.meetForm" placeholder="请选择">
            <el-option
              v-for="item in meetFormOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="活动类型"
          prop="meetType"
          :label-width="formLabelWidth"
        >
          <el-select v-model="meetForm.meetType" placeholder="请选择">
            <el-option
              v-for="item in meetTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="活动封面"
          prop="coverUrl"
          :label-width="formLabelWidth"
        >
          <div>
            <img v-if="meetForm.coverUrl" :src="meetForm.coverUrl" class="avatar" />
          </div>
          <div>
            <el-button type="primary" icon="el-icon-upload2" style="margin-top: 6px;" @click="handleShowImageForm(1)">选择图片</el-button>
          </div>
        </el-form-item>
        <el-form-item
          label="活动视频"
          prop="videoUrl"
          :label-width="formLabelWidth"
        >
          <div>
            <video v-if="meetForm.videoUrl" style="width: 160px; height: 90px" :src="meetForm.videoUrl" fit="contain"></video>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-upload2" style="margin-top: 6px;" @click="handleShowVideoForm(1)">选择视频</el-button>
          </div>
        </el-form-item>
        <el-form-item
          label="主办方"
          prop="meetGroup"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.meetGroup"></el-input>
        </el-form-item>
        <el-form-item
          label="嘉宾"
          prop="meetGuest"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.meetGuest"></el-input>
        </el-form-item>
        <el-form-item
          label="活动形式"
          prop="meetActive"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.meetActive"></el-input>
        </el-form-item>
        <el-form-item
          label="活动周期"
          prop="meetWeek"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.meetWeek"></el-input>
        </el-form-item>
        <el-form-item
          label="活动日期"
          prop="meetDate"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.meetDate"></el-input>
        </el-form-item>
        <el-form-item
          label="活动时间"
          prop="meetTime"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.meetTime"></el-input>
        </el-form-item>
        <el-form-item
          label="活动前按钮名称"
          prop="buttonText"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.buttonText"></el-input>
        </el-form-item>
        <el-form-item
          label="活动前按钮链接"
          prop="buttonUrl"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.buttonUrl"></el-input>
        </el-form-item>
        <el-form-item
          label="活动后按钮名称"
          prop="endButtonText"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.endButtonText"></el-input>
        </el-form-item>
        <el-form-item
          label="活动后按钮链接"
          prop="endButtonUrl"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.endButtonUrl"></el-input>
        </el-form-item>
        <el-form-item
          label="正常价格"
          prop="normalPrice"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.normalPrice"></el-input>
        </el-form-item>
        <el-form-item
          label="会员价格"
          prop="vipPrice"
          :label-width="formLabelWidth"
        >
          <el-input v-model="meetForm.vipPrice"></el-input>
        </el-form-item>

        <el-form-item
          label="结束时间"
          prop="endTime"
          :label-width="formLabelWidth"
        >
          <el-date-picker v-model="meetForm.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="活动介绍"
          prop="meetIntra"
          :label-width="formLabelWidth"
        >
          <ShenMaEditor v-model="meetForm.meetIntra" :message="meetForm.meetIntra"></ShenMaEditor>
        </el-form-item>
        <el-form-item
          label="嘉宾介绍"
          prop="guestIntra"
          :label-width="formLabelWidth"
        >
          <ShenMaEditor v-model="meetForm.guestIntra" :message="meetForm.guestIntra"></ShenMaEditor>
        </el-form-item>
        <el-form-item
          label="活动主题"
          prop="activeTitle"
          :label-width="formLabelWidth"
        >
          <ShenMaEditor v-model="meetForm.activeTitle" :message="meetForm.activeTitle"></ShenMaEditor>
        </el-form-item>
      </el-form>
    </div>
    <div class="box" style="margin: 20px;">
      <el-button size="medium" type="primary" @click="onSaveMeet">保存信息</el-button>
    </div>


    <!-- 选择图片 -->
    <el-dialog title="选择图片" :visible.sync="imgFormVisible">
      <div>
        <div>
          <!-- <vue-select-image :data-images="dataImages" :h="'100'" :w="'140'" :use-label="true" @onselectimage="onSelectImage"> -->
          <vue-select-image :data-images="dataImages" :h="'100'" :w="'100'" @onselectimage="onSelectImage">
          </vue-select-image>
        </div>
        <div>
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="pageNum"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            >
          </el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="imgFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSelectImage">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择视频 -->
    <el-dialog title="选择视频" :visible.sync="videoFormVisible">
      <div>
        <div>
          <vue-select-image :data-images="dataVideos" :h="'90'" :w="'160'" @onselectimage="onSelectVideo">
          </vue-select-image>
        </div>
        <div>
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="pageNum"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            >
          </el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="videoFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSelectVideo">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {uploadServerURL} from '@/config'
  import ShenMaEditor from '@/components/ShenMaEditor/index.vue'
  import VueSelectImage from 'vue-select-image'
  require('vue-select-image/dist/vue-select-image.css')

  import {
    addMeet,
    setMeet,
    getMeet,
    getResourceList
  } from '@/api/news.js'

  export default {
    name: 'MeetAdd',
    components: { VueSelectImage,ShenMaEditor },
    props: {
      meetId: { type: [String,Number], default: 0 },
    },
    data() {
      return {
        formLabelWidth: '120px',
        meetForm: {
          meetId: 0,
          title: null,
          description: null,
          keywords: null,
          topRank: 0,
          sortRank: 99999,
          issueTime: null,
          classicRank: 0,
          jumpUrl: null,
          meetTitle: 0,
          meetForm: 0,
          meetType: 0,
          coverUrl: null,
          videoUrl: null,
          meetGroup: null,
          meetGuest: null,
          meetActive: null,
          meetWeek: null,
          meetDate: null,
          meetTime: null,
          endTime: null,
          buttonText: '',
          buttonUrl: '',
          endButtonText: '',
          endButtonUrl: '',
          meetIntra: null,
          guestIntra: null,
          activeTitle: null,
          vipPrice: '',
          normalPrice: '',


        },
        rules: {
          title: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
          meetDate: [{ required: true, message: '请输入活动日期', trigger: 'blur' }],
          meetTime: [{ required: true, message: '请输入活动时间', trigger: 'blur' }],
          endTime: [{ required: true, message: '请输入活动结束时间', trigger: 'blur' }],
          buttonText: [{ required: true, message: '活动前按钮名称', trigger: 'blur' }],
          endButtonText: [{ required: true, message: '活动后按钮名称', trigger: 'blur' }],
        },
        meetTitleOptions: [
          {
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '人才发展'
          },
          {
            value: 2,
            label: '数字转型'
          },
          {
            value: 3,
            label: '其他'
          },
        ],
        meetFormOptions: [
          {
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '线上直播'
          },
          {
            value: 2,
            label: '线下实战'
          },
          {
            value: 3,
            label: '免费'
          },
          {
            value: 4,
            label: '收费'
          },
        ],
        meetTypeOptions: [
          {
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '大赛活动'
          },
          {
            value: 2,
            label: '大会活动'
          },
          {
            value: 3,
            label: '免费'
          },
          {
            value: 4,
            label: '收费'
          },
        ],
        // 选择图片对话框
        imgFormVisible: false,
        dataImages: [],
        pageNum: 1,
        pageSize: 12,
        total: 0,
        imageSelectUrl: null,
        imageId: 0,
        videoFormVisible: false,
        dataVideos: [],
        videoId: 0,
        videoSelectUrl: null,
      }
    },
    mounted() {
      console.log('mounted...', this.meetId)
      this.loadMeetInfo()
    },
    methods: {
      loadMeetInfo() {
        if(this.meetId > 0) {
          let param = {id: this.meetId}
          getMeet(param).then(res => {
            console.log('getMeet...', res)
            if(res.code == 200) {
              this.meetForm = res.data
              console.log('getMeet', this.meetForm);
            }
          })
        }
      },
      onSaveMeet() {
        console.log('onSaveMeet...');
        this.$refs['meetForm'].validate((valid) => {
          if (valid) {
            this.saveMeetInfo()
          } else {
            this.$message.error('请把表单数据填写完整')
            return false;
          }
        });
        // if (this.meetForm.title == '' || this.meetForm.title == null) {
        //   this.$message.error('没有填写文章标题')
        //   return
        // }
        // // 提交数据
        // if(this.articleId > 0) {
        //   this.meetForm.articleId = this.articleId
        //   this.doSetArticle()
        // }
        // else {
        //   this.doAddArticle()
        // }
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNum = val
        if(this.imgFormVisible) {
          this.loadResourceImages()
        }
        else {
          this.loadResourceVideos()
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        if(this.imgFormVisible) {
          this.loadResourceImages()
        }
        else {
          this.loadResourceVideos()
        }
      },
      submitSelectImage() {
        this.imgFormVisible = false
        if(this.imageId == 1) {
          this.meetForm.coverUrl = this.imageSelectUrl
        }
      },
      submitSelectVideo() {
        this.videoFormVisible = false
        if(this.videoId == 1) {
          let url = this.videoSelectUrl
          let videoUrl = url.substring(0, url.indexOf('?'));
          console.log('videoUrl='+videoUrl);
          this.meetForm.videoUrl = videoUrl
        }
      },
      handleShowImageForm(id) {
        this.imageId = id
        this.loadResourceImages()
        this.imgFormVisible = true
      },
      handleShowVideoForm(id) {
        this.videoId = id
        this.loadResourceVideos()
        this.videoFormVisible = true
      },
      onSelectImage(image) {
        console.log(image)
        this.imageSelectUrl = image.src
      },
      onSelectVideo(video) {
        console.log(video)
        this.videoSelectUrl = video.src
      },
      loadResourceImages() {
        let param = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyWord: 'image'
        }
        getResourceList(param).then(res => {
          console.log('getResourceList', res);
          if(res.code == 200) {
            this.dataImages = []
            res.data.records.forEach(item => {
              let img = {
                id: item.fileId,
                src: item.fileUrl,
                alt: item.fileName
              }
              this.dataImages.push(img)
            })
            // this.tableData = res.data.records
            this.pageNum = res.data.current
            this.pageSize = res.data.size
            this.total = res.data.total
          }
        })
      },
      loadResourceVideos() {
        let param = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyWord: 'video'
        }
        getResourceList(param).then(res => {
          console.log('getResourceList', res);
          if(res.code == 200) {
            this.dataVideos = []
            res.data.records.forEach(item => {
              let img = {
                id: item.fileId,
                src: item.fileUrl + '?x-oss-process=video/snapshot,t_10000,m_fast',
                alt: item.fileName
              }
              this.dataVideos.push(img)
            })
            this.pageNum = res.data.current
            this.pageSize = res.data.size
            this.total = res.data.total
          }
        })
      },
      saveMeetInfo() {
        console.log('saveMeetInfo');
        if(this.meetForm.meetId > 0) {
          setMeet(this.meetForm).then(res => {
            if(res.code == 200) {
              this.$message.success('数据保存成功')
              this.$store.dispatch('tabsBar/delVisitedRoute', this.$route)
              this.$router.push('/news/meet')
            }
            else {
              this.$message.error(res.msg)
            }
          })
        }
        else {
          addMeet(this.meetForm).then(res => {
            if(res.code == 200) {
              this.$message.success('数据保存成功')
              this.$store.dispatch('tabsBar/delVisitedRoute', this.$route)
              this.$router.push('/news/meet')
            }
            else {
              this.$message.error(res.msg)
            }
          })
        }
      },
    }
  }
</script>

<style>
  .box {
    margin: 20px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 90px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 160px;
    height: 90px;
    display: block;
  }
</style>
